<template>
  <div class="table-box">
    <el-table
        ref="tableData"
        v-loading="loading"
        :row-key="rowKey"
        :style="{ width: '100%', fontSize: fontSize + 'px' }"
        :show-header="showHeader"
        :data="tableData"
        :height="tableHeight"
        :summary-method="getSummaries"
        :show-summary="showSummary"
        :cell-style="cellStyle"
        :cell-class-name="tableCellClassName"
        :span-method="arraySpanMethod"
        :border="border"
        size="default"
        :highlight-current-row="highlightCurrentRow"
        v-bind="tableInfo"
        :stripe="isStripe"
        v-on="events"
    >
      <slot name="expand"/>
      <!-- 多选 -->
      <el-table-column
          v-if="needSelect"
          :selectable="selectable"
          type="selection"
          width="55"
          :reserve-selection="isReserve"
      />
      <el-table-column v-if="hasIndex" label="序号" width="50" type="index"/>
      <template v-for="(item, index) in tableColumn">
        <!-- 此列需要自定义 notTooltip  超出行是否隐藏 -->
        <el-table-column
            v-if="item.isSlot"
            :key="'%' + index"
            :show-overflow-tooltip="!item.notTooltip"
            v-bind="item"
            v-on="events"
        >
          <template #default="{ row, $index }">
            <ex-slot
                v-if="item.render"
                :render="item.render"
                :row="row"
                :index="$index"
                :column="item"
                :class="item.prop"
                :default-value="item.defaultValue"
            />
            <slot v-else :name="item.prop" :row="row"/>
          </template>
        </el-table-column>
        <!-- 正常列 -->
        <el-table-column
            v-else
            :key="'%' + index"
            show-overflow-tooltip
            v-bind="item"
            v-on="events"
        />
      </template>
      <el-table-column
          v-if="hasOperation"
          label="操作"
          :min-width="operationWidth"
          :fixed="fixed"
          align="center"
      >
        <!-- <template v-if="!btnButton || btnButton.length === 0" #default="scope">
          <slot name="operation" :row="scope.row" :index="scope.$index" />
        </template> -->
        <template v-if="btnButton.length" #default="{ row, column, $index }">
          <el-button
              v-for="(value, i) in btnButton"
              :key="'$' + i"
              :style="{ fontSize: fontSize + 'px' }"
              size="small"
              :type="value.type"
              :icon="value.icon"
              :class="value.class"
              :disabled="value.disabled && value.disabled(row, column, $index)"
              @click.stop="value.callback(row, column, $index)"
          >
            {{ value.text }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 只针对团队会诊页面 吧v-else关闭 -->
    </el-table>
    <!-- 分页 -->
    <div
        v-if="isNeedPagination"
        style="display: flex; justify-content: flex-end; align-item: centerl; padding-top: 15px"
    >
      <el-pagination
          ref="pagination"
          :page-sizes="pageSizes"
          :page-size.sync="computedPageSize"
          :hide-on-single-page="isSinglePageHide"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="computedCurrentPage"
          :total="total"
          :small="small"
          :pager-count="pagerCount"
          @current-change="currentChange"
          @size-change="sizeChange"
      />
    </div>
  </div>
</template>
<script>
// 自定义组件的内容
const exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    },
    defaultValue: [Number, String]
  },

  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    const defaultValue = ctx.props.defaultValue
    params.column = ctx.props.column || {}
    return h(
        'div',
        {
          class: [
            params.column.prop || '',
            params.column.class || params.column.className || ''
          ].join('')
        },
        [ctx.props.render(h, params) || defaultValue]
    )
  }
}
export default {
  name: 'PublicTable',
  components: {
    'ex-slot': exSlot
  },
  props: {
    // key（唯一key值，和reserve-selection搭配使用）
    rowKey: {
      type: [Object, Function],
      default: () => ({})
    },
    // 多选框是否记住上一页数据(必须与row-key唯一值搭配使用)
    isReserve: {
      type: Boolean,
      default: false
    },
    // 单元格的 style 的回调方法
    cellStyle: {
      type: [Object, Function],
      default: () => ({})
    },
    small: {
      type: Boolean,
      default: false
    },
    pagerCount: {
      type: Number,
      default: 7
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示合计
    showSummary: {
      type: Boolean,
      default: false
    },
    // 是否要高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: true
    },
    // 自定义的合计计算方法
    getSummaries: {
      type: Function,
      default: () => {
      }
    },
    // 获取表格行列索引值
    tableCellClassName: {
      type: Function,
      default: () => {
      }
    },
    // 合并行或列
    arraySpanMethod: {
      type: Function,
      default: () => {
      }
    },
    // 是否需要多选
    needSelect: {
      type: Boolean,
      default: false
    },
    // 是否select需要特殊判断
    selectable: {
      type: Function,
      default: () => {
        return true
      }
    },
    // 是否需要序号
    hasIndex: {
      type: Boolean,
      default: false
    },
    // 默认是否选中第一列
    isSetCurrentRow: {
      type: Boolean,
      default: false
    },
    // 是否需要分页
    isNeedPagination: {
      type: Boolean,
      default: false
    },
    // 是否单页隐藏，默认为true
    isSinglePageHide: {
      type: Boolean,
      default: false
    },
    // 当前页页码，支持.sync修饰符
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页数据条数, 支持.sync修饰符默认为每页10条
    pageSize: {
      type: Number,
      default: 20
    },
    // 数据总条数
    total: {
      type: Number,
      default: 0
    },
    // 每页多少数据
    pageSizes: {
      type: Array,
      required: false,
      default: () => [20, 40, 80, 100]
    },
    tableInfo: {
      type: Object,
      default: () => {
      }
    },
    // 获取数据时是否需要加载loading
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格展示数据
    tableColumn: {
      type: Array,
      default: () => []
    },
    // 是否需要操作列
    hasOperation: {
      type: Boolean,
      default: true
    },
    // 是否需要边框
    border: {
      type: Boolean,
      default: false
    },
    // 操作列
    btnButton: {
      type: Array,
      default: () => []
    },
    // 操作列宽度
    operationWidth: {
      type: String,
      default: '60px'
    },
    // 操作
    fixed: {
      type: [Boolean, String],
      default: false
    },
    // 表格方法
    events: {
      type: Object,
      default: () => {
      }
    },
    // 是否为斑马纹 table
    isStripe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fontSize: sessionStorage.getItem('fontSize') || ''
    }
  },
  // data() {
  //   return {
  //     // eslint-disable-next-line vue/no-dupe-keys
  //     tableData: []
  //   }
  // },
  computed: {
    computedCurrentPage: {
      get() {
        return this.currentPage
      },
      set(val) {
        this.$emit('update:currentPage', val)
      }
    },
    computedPageSize: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    },
    tableHeight() {
      console.log('height', !this.isNeedPagination ? '100%' : 'calc(100% - 47px)')
      return !this.isNeedPagination ? '100%' : 'calc(100% - 47px)'
    },

  },
  watch: {
    '$parent.activeName'() {
      this.$nextTick(() => {
        this.$refs.tableData.doLayout()
      })
    },
    diagnosisSize: {
      handler(newValue) {
        this.fontSize = newValue
      }
    }
  },
  mounted() {
    if (this.isSetCurrentRow) {
      setTimeout(() => {
        this.$refs.tableData.setCurrentRow(this.tableData[0])
      }, 500)
    }
  },
  methods: {
    // 页面切换事件  通过 @currentChange 绑定
    currentChange(val) {
      this.$emit('currentChange', val)
    },
    // 每页条数切换事件，通过@sizeChange 绑定
    sizeChange(val) {
      this.$emit('sizeChange', val)
    },
    getTableRef() {
      return this.$refs.tableData
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box {
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

::v-deep .el-table {
  border: 1px solid #dfe6ec;
}

::v-deep .el-table th {
  padding: 0;
  height: 40px;
  background: #f2f4fa;
  box-shadow: 0px 1px 0px 0px #ebedf0;
  // color: #191f25;
  color: #000;
  font-weight: 400;
}

::v-deep .el-table td {
  padding: 0;
  height: 40px;
}

::v-deep .el-table {
  width: 100%;

  .el-table__header-wrapper table,
  .el-table__body-wrapper table {
    // width: 100% !important;
  }

  .el-table__body,
  .el-table__footer,
  .el-table__header {
    // table-layout: auto;
  }

  .maxMinBtn {
    padding: 0 5px;
  }
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #e6f3e2;
}

::v-deep .el-table__body tr.current-row {
  .flex_div {
    background: rgba(21, 91, 212, 0.3) !important;
  }

  td {
    background: rgba(21, 91, 212, 0.3) !important;
  }

  td {
    background: rgba(21, 91, 212, 0.2) !important;
  }
}
</style>
